<template>
  <el-drawer
      title="编辑题目"
      v-model="drawer"
      :direction="direction"
      :before-close="handleClose" destroy-on-close :close-on-click-modal="true" :modal="true" size="25%" :lock-scroll="false">


    <sign-choose-edit v-if="question.qtype === 'sign' && (question.type === 'radio' || question.type === 'checkbox')"
        :title="question.title"
        :checked="question.isNecessary"
        :isRandom="question.isRandom"
        :options="question.options"
        @changeTitle="changeTitle"
        @changeNess="changeNess"
        @changeRandom="changeRandom"
        @finish="finish"
        @addOption="addOption"
        @deleteOption="deleteOption"
        @changeDefault="changeDefault"
        @changeText="changeText"
        @changeDes="changeDes"
        @upmove="upmove"
        @downmove="downmove"
        @addFinalOption="addFinalOption"
        @chooseavinum="chooseAviNum"
        @optnumchange="optNumChange">
    </sign-choose-edit>

    <choose-edit v-else-if="question.type === 'radio' || question.type === 'checkbox'"
        :title="question.title"
        :checked="question.isNecessary"
        :isRandom="question.isRandom"
        :options="question.options"
        @changeTitle="changeTitle"
        @changeNess="changeNess"
        @changeRandom="changeRandom"
        @finish="finish"
        @addOption="addOption"
        @deleteOption="deleteOption"
        @changeDefault="changeDefault"
        @changeText="changeText"
        @changeDes="changeDes"
        @upmove="upmove"
        @downmove="downmove"
        @addFinalOption="addFinalOption">
    </choose-edit>


    <sign-completion-edit
        v-if="question.qtype === 'sign' && question.type === 'completion'"
        :title="question.title"
        :checked="question.isNecessary"
        :cmpavinum="question.store"
        :is-cmp-avi-set="question.store!=null"
        @changeTitle="changeTitle"
        @changeNess="changeNess"
        @cmpavinumchange="cmpAviNumChange"
        @finish="finish">
    </sign-completion-edit>


    <completion-edit v-else-if="question.type === 'completion'"
      :title="question.title"
      :checked="question.isNecessary"
      @changeTitle="changeTitle"
      @changeNess="changeNess"
      @finish="finish">
    </completion-edit>

    <sign-star-edit
        v-if="question.qtype === 'sign' && question.type === 'score'"
        :title="question.title"
        :checked="question.isNecessary"
        :max="getmax(question)"
        @changeTitle="changeTitle"
        @changeNess="changeNess"
        @finish="finish"
        @changeGrade="changeGrade"
        @staravinumchange="starAviNumChange">
    </sign-star-edit>

    <star-edit
        v-else-if="question.type === 'score'"
        :title="question.title"
        :checked="question.isNecessary"
        :max="getmax(question)"
        @changeTitle="changeTitle"
        @changeNess="changeNess"
        @finish="finish"
        @changeGrade="changeGrade">
    </star-edit>

  </el-drawer>
</template>

<script>
import ChooseEdit from '../../question/ChooseEdit.vue'
import SignChooseEdit from './question/SignChooseEdit'
import SignCompletionEdit from './question/completion/CompletionEdit'
import CompletionEdit from '../../question/completion/CompletionEdit.vue'
import StarEdit from '../../question/score/StarEdit.vue'
import SignStarEdit from './question/score/StarEdit'

export default {
  data() {
    return {
      direction: 'rtl',
    };
  },
  components: {
    ChooseEdit,
    CompletionEdit,
    SignCompletionEdit,
    StarEdit,
    SignChooseEdit,
    SignStarEdit,
  },
  emits: ['changeRandom','changeTitle', 'changeNess', 'finish', 'addOption', 'deleteOption', 'changeDefault', 'changeText', 'changeDes', 'upmove', 'downmove', 'addFinalOption', 'autoFill', 'changeGrade'],
  methods: {
    handleClose(done) {
      done()
      this.finish()
    },

    changeTitle(title) {
      this.$emit('changeTitle', title)
    },

    changeNess(checked) {
      this.$emit('changeNess', checked)
    },

    changeRandom(isRandom) {
      this.$emit('changeRandom', isRandom)
    },

    finish() {
      this.$emit('finish')
    },

    getmax(question) {
      return question.options.length - 1
    },

    changeGrade(max) {
      this.$emit('changeGrade',max)
    },

    addOption(index) { 
      this.$emit('addOption',index)
    },

    addFinalOption() {
      this.$emit('addFinalOption')
    },

    deleteOption(index) {
      
      this.$emit('deleteOption', index)
    },

    changeDefault(index) {
      this.$emit('changeDefault', index)
    },

    changeText(data) {
      this.$emit('changeText', data)
    },

    changeDes(data) {
      this.$emit('changeDes', data)
    },
    
    upmove(index) {
      this.$emit('upmove', index)
    },

    downmove(index) {
      this.$emit('downmove', index)
    },

    chooseAviNum(num) {
      console.log('change');
      this.$emit('chooseavinum', num)
    },

    optNumChange(data) {
      this.$emit('optnumchange', data)
    },

    cmpAviNumChange(num) {
      console.log('cmpchange');
      this.$emit('cmpavinumchange', num)
    },

    starAviNumChange(num) {
      console.log('star change need out');
      this.$emit('staravinumchange', num)
    }
 
  },
  props: {
    question: {
      type: Object,
      default: {}
    },
    drawer: {
      type: Boolean,
      default: true,
    }
  }
};
</script>

<style>

</style>
